/*
 * Copyright (c) 2021 minglong@iscas.ac.cn
 *
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this list of
 *    conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright notice, this list
 *    of conditions and the following disclaimer in the documentation and/or other materials
 *    provided with the distribution.
 *
 * 3. Neither the name of the copyright holder nor the names of its contributors may be used
 *    to endorse or promote products derived from this software without specific prior written
 *    permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
<template>
<!-- sidebar -->
<el-row :gutter="24">
  <el-col :span="6">
    <h5>默认颜色</h5>
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="aqua">
      <!-- quick start -->
      <el-submenu index="1">
        <template slot="title">
          <span>快速开始</span>
        </template>
        <el-menu-item-group>
          <template slot="title">轻量和小型系统入门</template>
          <el-menu-item index="1-1">概述</el-menu-item>
          <!-- gap -->
          <el-submenu index="1-2">
            <template slot="title">入门介绍</template>
            <el-menu-item index="1-2-1">Hi3861开发板介绍</el-menu-item>
            <el-menu-item index="1-2-2">Hi3516开发板介绍</el-menu-item>
            <el-menu-item index="1-2-3">Hi3518开发板介绍</el-menu-item>
          </el-submenu>

          <!-- gap -->
          <el-submenu index="1-3">
            <template slot="title">搭建系统环境</template>
            <el-menu-item index="1-3-1">概述</el-menu-item>
            <el-menu-item index="1-3-2">Windows开发环境准备</el-menu-item>
            <el-menu-item index="1-3-3">获取源码及Ubuntu编译环境准备</el-menu-item>
            <el-menu-item index="1-3-4">常见问题</el-menu-item>
          </el-submenu>

          <!-- gap -->
          <el-submenu index="1-4">
            <template slot="title">开发步骤-Hi3861开发板</template>
            <el-menu-item index="1-4-1">安装开发板环境</el-menu-item>
            <el-menu-item index="1-4-2">WLAN联网（编译、烧录）</el-menu-item>
            <el-menu-item index="1-4-3">运行Hello World</el-menu-item>
            <el-menu-item index="1-4-4">常见问题</el-menu-item>
          </el-submenu>

          <el-submenu index="1-5">
            <template slot="title">开发步骤-Hi3516开发板</template>
            <el-menu-item index="1-5-1">运行Hello OHOS（编译、烧录）</el-menu-item>
            <el-menu-item index="1-5-2">驱动开发示例</el-menu-item>
            <el-menu-item index="1-5-3">常见问题</el-menu-item>
          </el-submenu>

          <el-submenu index="1-6">
            <template slot="title">开发步骤-Hi3518开发板</template>
            <el-menu-item index="1-6-1">安装开发板环境</el-menu-item>
            <el-menu-item index="1-6-2">运行Hello OHOS（编译、烧录）</el-menu-item>
            <el-menu-item index="1-6-3">常见问题</el-menu-item>
          </el-submenu>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">标准系统入门</template>
          <el-menu-item index="1-7">入门介绍</el-menu-item>
          <el-menu-item index="1-8">搭建Windows开发环境</el-menu-item>
          <el-menu-item index="1-9">搭建Ubuntu环境(获取源码及编译，Docker方式)</el-menu-item>
          <el-menu-item index="1-10">搭建Ubuntu环境(获取源码及编译，安装包方式)</el-menu-item>
          <el-menu-item index="1-11">镜像烧录</el-menu-item>
          <el-menu-item index="1-12">镜像运行</el-menu-item>
          <el-menu-item index="1-13">常见问题</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <!-- dev-kernel -->
      <el-submenu index="2">
        <template slot="title">
          <span>设备开发-内核</span>
        </template>
        <el-menu-item-group>
          <template slot="title">轻量系统内核</template>

          <el-menu-item index="2-1">内核概述</el-menu-item>

          <el-submenu index="2-2">
            <template slot="title">基础内核</template>
            <el-submenu index="2-2-1">
              <template slot="title">中断管理</template>
              <el-menu-item index="2-2-1-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-1-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-3">
              <template slot="title">任务管理</template>
              <el-menu-item index="2-2-3-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-3-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-4">
              <template slot="title">内存管理</template>
              <el-menu-item index="2-2-4-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-4-2">静态内存</el-menu-item>
              <el-menu-item index="2-2-4-2">动态内存</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-5">
              <template slot="title">内核通信机制-事件</template>
              <el-menu-item index="2-2-5-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-5-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-6">
              <template slot="title">内核通信机制-互斥锁</template>
              <el-menu-item index="2-2-6-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-6-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-7">
              <template slot="title">内核通信机制-消息队列</template>
              <el-menu-item index="2-2-7-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-7-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-8">
              <template slot="title">内核通信机制-信号量</template>
              <el-menu-item index="2-2-8-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-8-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-9">
              <template slot="title">时间管理</template>
              <el-menu-item index="2-2-9-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-9-2">开发指导</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2-10">
              <template slot="title">软件定时器</template>
              <el-menu-item index="2-2-10-1">基本概念</el-menu-item>
              <el-menu-item index="2-2-10-2">开发指导</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="2-3">
            <template slot="title">
              <span>扩展组件</span>
            </template>
            <el-menu-item index="2-3-1">C++支持</el-menu-item>
            <el-submenu index="2-3-2">
              <template slot="title">
                <span>CPU占用率</span>
              </template>
              <el-menu-item index="2-3-3">基本概念</el-menu-item>
              <el-menu-item index="2-3-4">开发指导</el-menu-item>
            </el-submenu>
            <el-menu-item index="2-3-5">基本概念</el-menu-item>
            <el-menu-item index="2-3-6">开发指导</el-menu-item>
            <el-submenu index="2-3-7">
              <template slot="title">
                <span>文件系统</span>
              </template>
              <el-menu-item index="2-3-8">FAT</el-menu-item>
              <el-menu-item index="2-3-9">LittleFS-基本概念</el-menu-item>
              <el-menu-item index="2-3-10">LittleFS-开发指导</el-menu-item>
            </el-submenu>
          </el-submenu>

            <el-submenu index="2-4">
              <template slot="title">
                <span>内核调测</span>
              </template>
              <el-menu-item index="2-4-1">内存调测-内存信息统计</el-menu-item>
              <el-menu-item index="2-4-2">内存调测-内存泄漏检测</el-menu-item>
              <el-menu-item index="2-4-3">内存调测-踩内存检测</el-menu-item>
              <el-menu-item index="2-4-4">异常调测</el-menu-item>
              <el-menu-item index="2-4-5">Trace调测</el-menu-item>
            </el-submenu>

            <el-submenu index="2-5">
              <template slot="title">
                <span>附录</span>
              </template>
              <el-menu-item index="2-5-1">内核编码规范</el-menu-item>
              <el-menu-item index="2-5-2">基本数据结构-双向链表</el-menu-item>
              <el-menu-item index="2-5-3">标准库支持-CMSIS支持</el-menu-item>
              <el-menu-item index="2-5-4">标准库支持-POSIX支持</el-menu-item>
            </el-submenu>
        </el-menu-item-group>
        
        <el-menu-item-group>
          <template slot="title">小型系统内核</template>
          <el-menu-item index="2-6">内核概述</el-menu-item>
          <el-submenu index="2-7">
            <template slot="title">
              <span>内核启动</span>
            </template>
            <el-menu-item index="2-7-1">内核态启动</el-menu-item>
            <el-menu-item index="2-7-2">用户态启动</el-menu-item>
          </el-submenu>

          <el-submenu index="2-8">
            <template slot="title">
              <span>基础内核</span>
            </template>
            <el-menu-item index="2-8-1">中断及异常处理</el-menu-item>
            <el-submenu index="2-8-2">
              <template slot="title">
                <span>进程管理</span>
              </template>
              <el-menu-item index="2-8-3">进程</el-menu-item>
              <el-menu-item index="2-8-4">任务</el-menu-item>
              <el-menu-item index="2-8-5">调度器</el-menu-item>
            </el-submenu>
            
            <el-submenu index="2-9">
              <template slot="title">
                <span>内存管理</span>
              </template>
              <el-menu-item index="2-9-1">堆内存管理</el-menu-item>
              <el-menu-item index="2-9-2">物理内存管理</el-menu-item>
              <el-menu-item index="2-9-3">虚拟内存管理</el-menu-item>
              <el-menu-item index="2-9-4">虚实映射</el-menu-item>
            </el-submenu>

            <el-submenu index="2-10">
              <template slot="title">
                <span>内核通信机制</span>
              </template>
              <el-menu-item index="2-10-1">事件</el-menu-item>
              <el-menu-item index="2-10-2">信号量</el-menu-item>
              <el-menu-item index="2-10-3">互斥锁</el-menu-item>
              <el-menu-item index="2-10-4">消息队列</el-menu-item>
              <el-menu-item index="2-10-5">读写锁</el-menu-item>
              <el-menu-item index="2-10-6">用户态快速互斥锁</el-menu-item>
              <el-menu-item index="2-10-7">信号</el-menu-item>
            </el-submenu>

            <el-menu-item index="2-10-8">时间管理</el-menu-item>
            <el-menu-item index="2-10-9">软件定时器</el-menu-item>
            <el-menu-item index="2-10-10">原子操作</el-menu-item>
          </el-submenu>

          <el-submenu index="2-11">
            <template slot="title">
              <span>扩展组件</span>
            </template>
            <el-menu-item index="2-11-1">系统调用</el-menu-item>
            <el-menu-item index="2-11-2">动态加载与链接</el-menu-item>
            <el-menu-item index="2-11-3">虚拟动态共享库</el-menu-item>
            <el-menu-item index="2-11-4">轻量级进程间通信</el-menu-item>
            <el-menu-item index="2-11-5">虚拟文件系统</el-menu-item>
            <el-submenu index="2-11-6">
              <template slot="title">
                <span>支持的文件系统</span>
              </template>
              <el-menu-item index="2-11-7">FAT</el-menu-item>
              <el-menu-item index="2-11-8">JFFS2</el-menu-item>
              <el-menu-item index="2-11-9">NFS</el-menu-item>
              <el-menu-item index="2-11-10">Ramfs</el-menu-item>
              <el-menu-item index="2-11-11">Procfs</el-menu-item>
            </el-submenu>
            <el-menu-item index="2-11-12">适配新的文件系统</el-menu-item>
          </el-submenu>

          <el-submenu index="2-12">
            <template slot="title">
              <span>调测与工具</span>
            </template>
            <el-submenu index="2-12-1">
              <template slot="title">
                <span>Shell</span>
              </template>
              <el-menu-item index="2-12-2">Shell介绍</el-menu-item>
              <el-menu-item index="2-12-3">Shell命令开发指导</el-menu-item>
              <el-menu-item index="2-12-4">Shell命令编程实例</el-menu-item>
              <el-menu-item index="2-12-5">Shell命令使用详解</el-menu-item>
              <el-submenu index="2-12-6">
                <template slot="title">
                  <span>系统命令</span>
                </template>
                <el-menu-item index="2-12-7">cpup</el-menu-item>
                <el-menu-item index="2-12-8">date</el-menu-item>
                <el-menu-item index="2-12-9">dmesg</el-menu-item>
                <el-menu-item index="2-12-10">exec</el-menu-item>
                <el-menu-item index="2-12-11">free</el-menu-item>
                <el-menu-item index="2-12-12">help</el-menu-item>
                <el-menu-item index="2-12-13">hwi</el-menu-item>
                <el-menu-item index="2-12-14">kill</el-menu-item>
                <el-menu-item index="2-12-15">log</el-menu-item>
                <el-menu-item index="2-12-16">memcheck</el-menu-item>
                <el-menu-item index="2-12-17">oom</el-menu-item>
                <el-menu-item index="2-12-18">pmm</el-menu-item>
                <el-menu-item index="2-12-19">reset</el-menu-item>
                <el-menu-item index="2-12-20">sem</el-menu-item>
                <el-menu-item index="2-12-21">stack</el-menu-item>
                <el-menu-item index="2-12-22">su</el-menu-item>
                <el-menu-item index="2-12-23">swtmr</el-menu-item>
                <el-menu-item index="2-12-24">systeminfo</el-menu-item>
                <el-menu-item index="2-12-25">task</el-menu-item>
                <el-menu-item index="2-12-26">uname</el-menu-item>
                <el-menu-item index="2-12-27">vmm</el-menu-item>
                <el-menu-item index="2-12-28">watch</el-menu-item>
              </el-submenu>
              <el-submenu index="2-13">
                <template slot="title">
                  <span>文件命令</span>
                </template>
                <el-menu-item index="2-13-1">cat</el-menu-item>
                <el-menu-item index="2-13-2">cd</el-menu-item>
                <el-menu-item index="2-13-3">chgrp</el-menu-item>
                <el-menu-item index="2-13-4">chmod</el-menu-item>
                <el-menu-item index="2-13-5">chown</el-menu-item>
                <el-menu-item index="2-13-6">cp</el-menu-item>
                <el-menu-item index="2-13-7">format</el-menu-item>
                <el-menu-item index="2-13-8">ls</el-menu-item>
                <el-menu-item index="2-13-9">lsfd</el-menu-item>
                <el-menu-item index="2-13-10">mkdir</el-menu-item>
                <el-menu-item index="2-13-11">mount</el-menu-item>
                <el-menu-item index="2-13-12">partinfo</el-menu-item>
                <el-menu-item index="2-13-13">partition</el-menu-item>
                <el-menu-item index="2-13-14">pwd</el-menu-item>
                <el-menu-item index="2-13-15">rm</el-menu-item>
                <el-menu-item index="2-13-16">rmdir</el-menu-item>
                <el-menu-item index="2-13-17">statfs</el-menu-item>
                <el-menu-item index="2-13-18">sync</el-menu-item>
                <el-menu-item index="2-13-19">touch</el-menu-item>
                <el-menu-item index="2-13-20">writeproc</el-menu-item>
                <el-menu-item index="2-13-21">umount</el-menu-item>
              </el-submenu>
              <el-submenu index="2-14">
                <template slot="title">
                  <span>网络命令</span>
                </template>
                <el-menu-item index="2-14-1">arp</el-menu-item>
                <el-menu-item index="2-14-2">dhclient</el-menu-item>
                <el-menu-item index="2-14-3">dns</el-menu-item>
                <el-menu-item index="2-14-4">ifconfig</el-menu-item>
                <el-menu-item index="2-14-5">ipdebug</el-menu-item>
                <el-menu-item index="2-14-6">netstat</el-menu-item>
                <el-menu-item index="2-14-7">ntpdate</el-menu-item>
                <el-menu-item index="2-14-8">ping</el-menu-item>
                <el-menu-item index="2-14-9">ping6</el-menu-item>
                <el-menu-item index="2-14-10">telnet</el-menu-item>
                <el-menu-item index="2-14-11">tftp</el-menu-item>
              </el-submenu>
              <el-menu-item index="2-14-12">魔法键使用方法</el-menu-item>
              <el-menu-item index="2-14-13">用户态异常信息说明</el-menu-item>
            </el-submenu>

            <el-menu-item index="2-14-14">Trace</el-menu-item>
            <el-menu-item index="2-14-15">进程调测-CPU占用率</el-menu-item>
            <el-submenu index="2-14-16">
              <template slot="title">
                <span>内存调测</span>
              </template>
              <el-menu-item index="2-14-17">内存信息统计</el-menu-item>
              <el-menu-item index="2-14-18">内存泄漏检测</el-menu-item>
              <el-menu-item index="2-14-19">踩内存检测</el-menu-item>
            </el-submenu>

            <el-menu-item index="2-14-20">其他内核调测手段-临终遗言</el-menu-item>
            <el-menu-item index="2-14-21">其他内核调测手段-常见问题定位方法</el-menu-item>
          </el-submenu>

          <el-submenu index="2-15">
            <template slot="title">
              <span>附录</span>
            </template>
            <el-menu-item index="2-15-1">基本数据结构-双向链表</el-menu-item>
            <el-menu-item index="2-15-2">基本数据结构-位操作</el-menu-item>
            <el-menu-item index="2-15-3">标准库</el-menu-item>
          </el-submenu>
        </el-menu-item-group>

        <el-menu-item-group>
          <template slot="title">标准系统内核</template>
          <el-menu-item index="1-7">Linux内核概述</el-menu-item>
          <el-menu-item index="1-8">OpenHarmony开发板Patch使用指导</el-menu-item>
          <el-menu-item index="1-9">Linux内核编译与构建指导</el-menu-item>
        </el-menu-item-group>

        <el-submenu index="">
          <template slot="title">
            <span></span>
          </template>
          <el-menu-item index=""></el-menu-item>
          <el-menu-item index=""></el-menu-item>
          <el-menu-item index=""></el-menu-item>
        </el-submenu>
      </el-submenu>

      <!-- dev-driver -->
      <el-submenu index="3">
        <template slot="title">
          <span>设备开发-驱动</span>
        </template>

        <el-submenu index="3-1">
          <template slot="title">
            <span>HDF驱动框架</span>
          </template>
          <el-menu-item index="3-1-1">HDF开发概述</el-menu-item>
          <el-menu-item index="3-1-2">驱动开发</el-menu-item>
          <el-menu-item index="3-1-3">驱动服务管理</el-menu-item>
          <el-menu-item index="3-1-4">驱动消息机制管理</el-menu-item>
          <el-menu-item index="3-1-5">配置管理</el-menu-item>
          <el-menu-item index="3-1-6">HDF开发实例</el-menu-item>
        </el-submenu>

        <el-submenu index="3-2">
          <template slot="title">
            <span>平台驱动开发</span>
          </template>
          <el-menu-item index="3-2-1">GPIO</el-menu-item>
          <el-menu-item index="3-2-2">I2C</el-menu-item>
          <el-menu-item index="3-2-3">RTC</el-menu-item>
          <el-menu-item index="3-2-4">SDIO</el-menu-item>
          <el-menu-item index="3-2-5">SPI</el-menu-item>
          <el-menu-item index="3-2-6">UART</el-menu-item>
          <el-menu-item index="3-2-7">WATCHDOG</el-menu-item>
          <el-menu-item index="3-2-8">MIPI_DSI</el-menu-item>
          <el-menu-item index="3-2-9">MMC</el-menu-item>
          <el-menu-item index="3-2-10">PWM</el-menu-item>
          <el-menu-item index="3-2-11">ADC</el-menu-item>
        </el-submenu>

        <el-submenu index="3-3">
          <template slot="title">
            <span>平台驱动使用</span>
          </template>
          <el-menu-item index="3-3-1">GPIO</el-menu-item>
          <el-menu-item index="3-3-2">I2C</el-menu-item>
          <el-menu-item index="3-3-3">RTC</el-menu-item>
          <el-menu-item index="3-3-4">SDIO</el-menu-item>
          <el-menu-item index="3-3-5">SPI</el-menu-item>
          <el-menu-item index="3-3-6">UART</el-menu-item>
          <el-menu-item index="3-3-7">WATCHDOG</el-menu-item>
          <el-menu-item index="3-3-8">MIPI DSI</el-menu-item>
        </el-submenu>

        <el-submenu index="3-4">
          <template slot="title">
            <span>外设驱动开发</span>
          </template>
          <el-menu-item index="3-4-1">LCD</el-menu-item>
          <el-menu-item index="3-4-2">TOUCHSCREEN</el-menu-item>
          <el-menu-item index="3-4-3">SENSOR</el-menu-item>
          <el-menu-item index="3-4-4">WLAN</el-menu-item>
        </el-submenu>
      </el-submenu>

      <!-- dev subsystem -->
      <el-submenu index="4">
        <template slot="title">
          <span>设备开发-子系统</span>
        </template>

        <el-submenu index="4-1">
          <template slot="title">
            <span>编译构建</span>
          </template>
            <el-menu-item index="4-1-1">轻量和小型系统编译构建指导</el-menu-item>
            <el-menu-item index="4-1-2">标准系统编译构建指导</el-menu-item>
        </el-submenu>

        <el-menu-item index="4-2">分布式远程启动</el-menu-item>

        <el-submenu index="4-3">
          <template slot="title">
            <span>图形图像</span>
          </template>
            <el-menu-item index="4-3-1">图形图像概述</el-menu-item>
            <el-menu-item index="4-3-2">容器类组件开发指导</el-menu-item>
            <el-menu-item index="4-3-3">布局容器类组件开发指导</el-menu-item>
            <el-menu-item index="4-3-4">普通组件开发指导</el-menu-item>
            <el-menu-item index="4-3-5">动画开发指导</el-menu-item>
        </el-submenu>

        <el-submenu index="4-4">
          <template slot="title">
            <span>相机</span>
          </template>
            <el-menu-item index="4-4-1">相机开发概述</el-menu-item>
            <el-menu-item index="4-4-2">拍照开发指导</el-menu-item>
            <el-menu-item index="4-4-3">录像开发指导</el-menu-item>
            <el-menu-item index="4-4-5">预览开发指导</el-menu-item>
        </el-submenu>

        <el-submenu index="4-5">
          <template slot="title">
            <span>音视频</span>
          </template>
          <el-menu-item index="4-5-1">音视频开发概述</el-menu-item>
          <el-menu-item index="4-5-2">音视频播放开发指导</el-menu-item>
          <el-menu-item index="4-5-3">音视频录制开发指导</el-menu-item>
        </el-submenu>

         <el-submenu index="4-6">
          <template slot="title">
            <span>公共基础</span>
          </template>
          <el-menu-item index="4-6-1">公共基础库概述</el-menu-item>
          <el-menu-item index="4-6-2">公共基础库开发指导</el-menu-item>
          <el-menu-item index="4-6-3">公共基础库常见问题</el-menu-item>
          </el-submenu>

          <el-submenu index="4-7">
            <template slot="title">
              <span>AI框架</span>
            </template>
            <el-menu-item index="4-7-1">AI引擎框架开发指南</el-menu-item>
            <el-menu-item index="4-7-2">搭建环境</el-menu-item>
            <el-submenu index="4-7-3">
              <template slot="title">
                <span>技术规范</span>
              </template>
              <el-menu-item index="4-7-4">代码管理规范</el-menu-item>
              <el-menu-item index="4-7-5">命名规范</el-menu-item>
              <el-menu-item index="4-7-6">接口开发规范</el-menu-item>
            </el-submenu>

            <el-submenu index="4-8">
              <template slot="title">
                <span>开发指导</span>
              </template>
              <el-menu-item index="4-8-1">SDK开发过程</el-menu-item>
              <el-menu-item index="4-8-3">插件的开发过程</el-menu-item>
              <el-menu-item index="4-8-4">配置文件的开发过程</el-menu-item>
            </el-submenu>

            <el-submenu index="4-1">
              <template slot="title">
                <span>开发示例</span>
              </template>
              <el-menu-item index="4-1-2">唤醒词识别SDK的开发示例</el-menu-item>
              <el-menu-item index="4-1-1">唤醒词识别插件的开发示例</el-menu-item>
              <el-menu-item index="4-1-1">唤醒词识别配置文件的开发示例</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="4-1">
            <template slot="title">
              <span>Sensor服务</span>
            </template>
            <el-menu-item index="4-1-2">Sensor服务子系概述</el-menu-item>
            <el-menu-item index="4-1-1">Sensor服务子系使用指导</el-menu-item>
            <el-menu-item index="4-1-1">Sensor服务子系使用实例</el-menu-item>
          </el-submenu>

          <el-submenu index="4-1">
            <template slot="title">
              <span>用户程序框架</span>
            </template>
            <el-menu-item index="4-1-2">概述</el-menu-item>
            <el-menu-item index="4-1-1">搭建环境</el-menu-item>
            <el-menu-item index="4-1-1">开发指导</el-menu-item>
            <el-menu-item index="4-1-1">开发实例</el-menu-item>
          </el-submenu>

          <el-menu-item index="4-1-1">OTA升级</el-menu-item>

          <el-submenu index="4-1">
            <template slot="title">
              <span>安全</span>
            </template>
            <el-menu-item index="4-1-2">概述</el-menu-item>
            <el-menu-item index="4-1-1">应用验签开发指导</el-menu-item>
            <el-menu-item index="4-1-1">应用权限管理开发指导</el-menu-item>
            <el-menu-item index="4-1-1">IPC通信鉴权开发指导</el-menu-item>
          </el-submenu>

          <el-submenu index="4-1">
            <template slot="title">
              <span>启动恢复</span>
            </template>
            <el-menu-item index="4-1-2">启动恢复子系统概述</el-menu-item>
            <el-menu-item index="4-1-1">init启动引导组件</el-menu-item>
            <el-menu-item index="4-1-1">appspawn应用孵化组件</el-menu-item>
            <el-menu-item index="4-1-1">bootstrap服务启动组件</el-menu-item>
            <el-menu-item index="4-1-1">syspara系统属性组件</el-menu-item>
            <el-menu-item index="4-1-1">常见问题</el-menu-item>
            <el-menu-item index="4-1-1">参考</el-menu-item>
          </el-submenu>

          <el-menu-item index="4-1-1">测试用例开发指导</el-menu-item>

          <el-submenu index="4-1">
            <template slot="title">
              <span>DFX</span>
            </template>
            <el-menu-item index="4-1-2">DFX概述</el-menu-item>
            <el-menu-item index="4-1-1">HiLog开发指导</el-menu-item>
            <el-menu-item index="4-1-1">HiLog_Lite开发指导</el-menu-item>
            <el-menu-item index="4-1-1">HiSysEvent开发指导</el-menu-item>
          </el-submenu>

          <el-submenu index="4-1">
          <template slot="title">
            <span>研发工具链</span>
          </template>
            <el-menu-item index="4-1-2">bytrace使用指导</el-menu-item>
            <el-menu-item index="4-1-1">hdc_std 使用指导</el-menu-item>
          </el-submenu>
          <el-menu-item index="4-1-1">XTS认证用例开发指导</el-menu-item>
      </el-submenu>

      <!-- dev privacy -->
      <el-submenu index="5">
        <template slot="title">
          <span>设备开发-隐私和安全</span>
        </template>
        <el-menu-item index="5-1">隐私保护</el-menu-item>
        <el-menu-item index="5-2">安全指南</el-menu-item>
      </el-submenu>

      <!-- dev guide -->
      <el-submenu index="6">
        <template slot="title">
          <span>设备开发-开发示例</span>
        </template>
        <el-submenu index="6-1">
          <template slot="title">
            <span>轻量和小型系统设备</span>
          </template>
          <el-submenu index="6-2">
            <template slot="title">
              <span>WLAN连接类产品</span>
            </template>
            <el-menu-item index="6-2-1">LED外设控制</el-menu-item>
            <el-menu-item index="6-2-2">集成三方SDK</el-menu-item>
          </el-submenu>

          <el-submenu index="6-3">
            <template slot="title">
              <span>无屏摄像头类产品</span>
            </template>
            <el-menu-item index="6-3-1">摄像头控制概述</el-menu-item>
            <el-menu-item index="6-3-2">拍照开发指导</el-menu-item>
            <el-menu-item index="6-3-3">录像开发指导</el-menu-item>
            <el-menu-item index="6-3-4">应用实例</el-menu-item>
          </el-submenu>
          <el-submenu index="6-4">
            <template slot="title">
              <span>带屏摄像头类产品</span>
            </template>
            <el-menu-item-group>
              <template slot="title">屏幕和摄像头控制概述</template>
              <el-menu-item index="6-5">概述</el-menu-item>
              <el-menu-item index="6-6">拍照开发指导</el-menu-item>
              <el-menu-item index="6-7">录像开发指导</el-menu-item>
              <el-menu-item index="7-8">预览开发指导</el-menu-item>
              <el-menu-item index="6-9">应用实例</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">视觉应用开发</template>
              <el-menu-item index="6-10">概述</el-menu-item>
              <el-menu-item index="6-11">开发准备</el-menu-item>
              <el-menu-item index="6-12">添加页面</el-menu-item>
              <el-menu-item index="6-13">开发首页</el-menu-item>
              <el-menu-item index="6-14">开发详情页</el-menu-item>
              <el-menu-item index="6-15">调试打包</el-menu-item>
              <el-menu-item index="6-16">真机运行</el-menu-item>
              <el-menu-item index="6-17">常见问题</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-submenu>

        <el-submenu index="6-18">
          <template slot="title">
            <span>标准系统设备</span>
          </template>
          <el-menu-item index="6-18-1">时钟应用开发指导</el-menu-item>
          <el-menu-item index="6-18-2">平台驱动开发示例</el-menu-item>
          <el-menu-item index="6-18-3">外设驱动开发示例</el-menu-item>
        </el-submenu>
      </el-submenu>

      <!-- porting -->
      <el-submenu index="7">
        <template slot="title">
          <span>设备开发-移植适配</span>
        </template>
        <el-menu-item-group>
          <el-submenu index="7-1">
            <template slot="title">
              <span>轻量系统芯片移植指导</span>
            </template>

            <el-submenu index="7-2">
              <template slot="title">
                <span>移植准备</span>
              </template>
              <el-menu-item index="7-2-1">移植须知</el-menu-item>
              <el-menu-item index="7-2-2">编译构建适配流程</el-menu-item>
            </el-submenu>

            <el-submenu index="7-3">
              <template slot="title">
                <span>内核移植</span>
              </template>
              <el-menu-item index="7-3-1">移植概述</el-menu-item>
              <el-menu-item index="7-3-2">内核基础适配</el-menu-item>
              <el-menu-item index="7-3-3">内核移植验证</el-menu-item>
            </el-submenu>

            <el-submenu index="7-4">
              <template slot="title">
                <span>板级系统移植</span>
              </template>
              <el-menu-item index="7-4-1">移植概述</el-menu-item>
              <el-menu-item index="7-4-2">板级驱动适配</el-menu-item>
              <el-menu-item index="7-4-3">HAL层实现</el-menu-item>
              <el-menu-item index="7-4-4">系统组件调用</el-menu-item>
              <el-menu-item index="7-4-5">三方组件适配</el-menu-item>
              <el-menu-item index="7-4-6">XTS认证</el-menu-item>
            </el-submenu>
            <el-menu-item index="7-5">常见问题</el-menu-item>
          </el-submenu>

          <el-submenu index="7-6">
            <template slot="title">
              <span>小型系统芯片移植指导</span>
            </template>
            
            <el-submenu index="7-7">
              <template slot="title">
                <span>移植准备</span>
              </template>
              <el-menu-item index="7-6-1">移植须知</el-menu-item>
              <el-menu-item index="7-6-2">编译构建</el-menu-item>
            </el-submenu>

            <el-submenu index="7-7">
              <template slot="title">
                <span>移植内核</span>
              </template>
              <el-menu-item index="7-7-1">LiteOS-A内核</el-menu-item>
              <el-menu-item index="7-7-2">Linux内核</el-menu-item>
            </el-submenu>

            <el-submenu index="7-8">
              <template slot="title">
                <span>驱动移植</span>
              </template>
              <el-menu-item index="7-8-1">移植概述</el-menu-item>
              <el-menu-item index="7-8-2">平台驱动移植</el-menu-item>
              <el-menu-item index="7-8-3">器件驱动移植</el-menu-item>
            </el-submenu>
            <el-menu-item index="7-9">标准系统移植指南</el-menu-item>
          </el-submenu>

          <el-menu-item index="8-2-1">标准系统移植指南</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">三方库移植</template>
          <el-menu-item index="1-1">概述</el-menu-item>
          <el-menu-item index="1-2">CMake方式组织编译的库移植</el-menu-item>
          <el-menu-item index="1-2">Makefile方式组织编译的库移植</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <!-- bundle -->
      <el-submenu index="8">
        <template slot="title">
          <span>设备开发-组件开发</span>
        </template>
          <el-menu-item index="8-1-1">开发规范</el-menu-item>
          <el-submenu index="8-2">
            <template slot="title">
              <span>开发指南</span>
            </template>
            <el-menu-item index="8-2-1">概述</el-menu-item>
            <el-menu-item index="8-2-2">安装hpm命令行工具</el-menu-item>
            <el-menu-item index="8-2-2">开发Bundle</el-menu-item>
          </el-submenu>
          <el-submenu index="8-3">
            <template slot="title">
              <span>开发示例</span>
            </template>
            <el-menu-item index="8-3-1">HPM介绍</el-menu-item>
            <el-menu-item index="8-3-2">编译环境准备</el-menu-item>
            <el-menu-item index="8-3-2">操作实例</el-menu-item>
          </el-submenu>
      </el-submenu>

      <!-- quick start for app dev -->
      <el-submenu index="15">
        <template slot="title">
          <span>应用开发-快速入门</span>
        </template>
        <el-submenu index="15-1">
          <template slot="title">
            <span>DevEco Studio 使用指南</span>
          </template>
          <el-menu-item index="15-2">概述</el-menu-item>
          <el-menu-item index="15-3">配置OpenHarmony SDK</el-menu-item>
          <el-menu-item index="15-4">创建OpenHarmony工程</el-menu-item>
          <el-menu-item index="15-5">配置OpenHarmony应用签名信息</el-menu-item>
          <el-menu-item index="15-6">安装运行OpenHarmony应用</el-menu-item>
        </el-submenu>
        <el-menu-item index="15-7">包结构说明</el-menu-item>
        <el-submenu index="15-8">
          <template slot="title">
            <span>快速入门</span>
          </template>
          <el-menu-item index="15-9">开发准备</el-menu-item>
          <el-menu-item index="15-10">使用JS语言开发</el-menu-item>
        </el-submenu>
      </el-submenu>

      <!-- UI -->
      <el-submenu index="9">
        <template slot="title">
          <span>应用开发-UI</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="9-1">JS UI框架概述</el-menu-item>
          <el-submenu index="9-2">
            <template slot="title">
              <span>构建用户界面</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="9-2-1">组件介绍</el-menu-item>
              <el-submenu>
                <template slot="title">构建布局</template>
                <el-menu-item index="9-2-2">布局说明</el-menu-item>
                <el-menu-item index="9-2-3">添加标题行和文本区域</el-menu-item>
                <el-menu-item index="9-2-4">添加图片区域</el-menu-item>
                <el-menu-item index="9-2-5">添加留言区域</el-menu-item>
                <el-menu-item index="9-2-6">添加容器</el-menu-item>
              </el-submenu>
              <el-menu-item index="9-3-1">添加交互</el-menu-item>
              <el-menu-item index="9-3-2">动画</el-menu-item>
              <el-menu-item index="9-3-3">事件</el-menu-item>
              <el-menu-item index="9-3-4">页面路由</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="9-4">自定义组件</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <!-- media -->
      <el-submenu index="10">
        <template slot="title">
          <span>应用开发-媒体</span>
        </template>
          <el-menu-item index="10-1">音频开发概述</el-menu-item>
          <el-menu-item index="10-2">音频播放开发指导</el-menu-item>
          <el-menu-item index="10-3">音频管理开发指导</el-menu-item>
      </el-submenu>

      <!-- connections -->
      <el-submenu index="11">
        <template slot="title">
          <span>应用开发-网络连接</span>
        </template>
          <el-menu-item index="11-1">IPC与RPC通信概述</el-menu-item>
          <el-menu-item index="11-2">IPC与RPC通信开发指导</el-menu-item>
          <el-menu-item index="11-3">远端状态订阅开发实例</el-menu-item>
      </el-submenu>

      <!-- JS Reference -->
      <el-submenu index="12">
        <template slot="title">
          <span>应用开发-JS参考规范</span>
        </template>
        <el-menu-item-group>

          <el-submenu index="12-0">
            <template slot="title">
              <span>框架说明</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="12-1">文件组织</el-menu-item>
              <el-menu-item index="12-2">js标签配置</el-menu-item>
              <el-menu-item index="12-3">app.js</el-menu-item>
              <el-menu-item index="12-4">HML语法参考</el-menu-item>
              <el-menu-item index="12-5">CSS语法参考</el-menu-item>
              <el-menu-item index="12-6">JS语法参考</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="12-99">
            <template slot="title">
              <span>组件</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="12-7">
                <template slot="title">
                  <span>通用</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="12-7-1">组件方法</el-menu-item>
                  <el-menu-item index="12-7-2">动画样式</el-menu-item>
                  <el-menu-item index="12-7-3">渐变样式</el-menu-item>
                  <el-menu-item index="12-7-4">转场样式</el-menu-item>
                  <el-menu-item index="12-7-5">自定义字体样式</el-menu-item>
                  <el-menu-item index="12-7-6">原子布局</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12-8">
                <template slot="title">
                  <span>容器组件</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="12-8-1">badge</el-menu-item>
                  <el-menu-item index="12-8-2">dialog</el-menu-item>
                  <el-menu-item index="12-8-3">div</el-menu-item>
                  <el-menu-item index="12-8-4">list</el-menu-item>
                  <el-menu-item index="12-8-5">list-item</el-menu-item>
                  <el-menu-item index="12-8-6">list-item-group</el-menu-item>
                  <el-menu-item index="12-8-7">panel</el-menu-item>
                  <el-menu-item index="12-8-8">popup</el-menu-item>
                  <el-menu-item index="12-8-9">refresh</el-menu-item>
                  <el-menu-item index="12-8-10">stack</el-menu-item>
                  <el-menu-item index="12-8-11">stepper</el-menu-item>
                  <el-menu-item index="12-8-12">stepper-item</el-menu-item>
                  <el-menu-item index="12-8-13">swiper</el-menu-item>
                  <el-menu-item index="12-8-14">tabs</el-menu-item>
                  <el-menu-item index="12-8-15">tab-bar</el-menu-item>
                  <el-menu-item index="12-8-16">tab-content</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12-9">
                <template slot="title">
                  <span>基础组件</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="12-9-1">button</el-menu-item>
                  <el-menu-item index="12-9-2">chart</el-menu-item>
                  <el-menu-item index="12-9-3">divider</el-menu-item>
                  <el-menu-item index="12-9-4">image</el-menu-item>
                  <el-menu-item index="12-9-5">image-animator</el-menu-item>
                  <el-menu-item index="12-9-6">input</el-menu-item>
                  <el-menu-item index="12-9-7">label</el-menu-item>
                  <el-menu-item index="12-9-8">marquee</el-menu-item>
                  <el-menu-item index="12-9-9">menu</el-menu-item>
                  <el-menu-item index="12-9-10">option</el-menu-item>
                  <el-menu-item index="12-9-11">picker</el-menu-item>
                  <el-menu-item index="12-9-12">picker-view</el-menu-item>
                  <el-menu-item index="12-9-13">piece</el-menu-item>
                  <el-menu-item index="12-9-14">progress</el-menu-item>
                  <el-menu-item index="12-9-15">qrcode</el-menu-item>
                  <el-menu-item index="12-9-16">rating</el-menu-item>
                  <el-menu-item index="12-9-17">select</el-menu-item>
                  <el-menu-item index="12-9-18">slider</el-menu-item>
                  <el-menu-item index="12-9-19">span</el-menu-item>
                  <el-menu-item index="12-9-20">switch</el-menu-item>
                  <el-menu-item index="12-9-21">text</el-menu-item>
                  <el-menu-item index="12-9-22">toolbar</el-menu-item>
                  <el-menu-item index="12-9-23">toolbar-item</el-menu-item>
                  <el-menu-item index="12-9-24">toggle</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12-10">
                <template slot="title">
                  <span>媒体组件</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="12-10-1">Camera</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12-11">
                <template slot="title">
                  <span>画布组件</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="12-11-1">canvas组件</el-menu-item>
                  <el-menu-item index="12-11-2">CanvasRenderingContext2D对象</el-menu-item>
                  <el-menu-item index="12-11-3">Image对象</el-menu-item>
                  <el-menu-item index="12-11-4">CanvasGradient对象</el-menu-item>
                  <el-menu-item index="12-11-5">ImageData对象</el-menu-item>
                </el-menu-item-group>
              </el-submenu>

              <el-submenu index="12-12">
                <template slot="title">
                  <span>栅格组件</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="12-12-1">基本概念</el-menu-item>
                  <el-menu-item index="12-12-2">grid-container</el-menu-item>
                  <el-menu-item index="12-12-3">grid-row</el-menu-item>
                  <el-menu-item index="12-12-4">grid-col</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
        </el-menu-item-group>

        <el-submenu index="12-98">
          <template slot="title">
            <span>自定义组件</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="12-13">基本用法</el-menu-item>
            <el-menu-item index="12-14">自定义事件</el-menu-item>
            <el-menu-item index="12-15">Props</el-menu-item>
            <el-menu-item index="12-16">事件参数</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="12-97">
          <template slot="title">
            <span>组件通用说明</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="12-18">通用事件</el-menu-item>
            <el-menu-item index="12-19">通用属性</el-menu-item>
            <el-menu-item index="12-20">通用样式</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="12-96">
          <template slot="title">
            <span>接口</span>
          </template>
          <el-menu-item index="12-21">日志打印</el-menu-item>
          <el-menu-item index="12-22">应用打点</el-menu-item>
          <el-menu-item index="12-23">页面路由</el-menu-item>
          <el-menu-item index="12-24">弹窗</el-menu-item>
          <el-menu-item index="12-25">定时器</el-menu-item>
          <el-menu-item index="12-26">时间设置</el-menu-item>
          <el-menu-item index="12-27">音频管理</el-menu-item>
          <el-menu-item index="12-28">音频播放</el-menu-item>
          <el-menu-item index="12-29">设备信息</el-menu-item>
          <el-menu-item index="12-30">系统属性</el-menu-item>
          <el-menu-item index="12-31">电池和充电属性</el-menu-item>
          <el-menu-item index="12-32">设置系统屏幕亮度</el-menu-item>
          <el-menu-item index="12-33">国际化</el-menu-item>
          <el-menu-item index="12-34">资源管理</el-menu-item>
          <el-menu-item index="12-35">升级</el-menu-item>
        </el-submenu>
      </el-submenu>

    </el-menu>
  </el-col>
  <!-- main body -->
  <el-col :span="18"><readme /></el-col>
</el-row>     
</template>

<script>
// import download from './download.md'
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
import readme from './readme.md'

export default {
  components: {
    readme
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style>
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  margin: 0 auto;
  padding: 45px;
}
</style>
